<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-s-grid"></i> 数据表格 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div style="margin-bottom: 16px">
                <a-button type="danger" icon="delete" :disabled="!hasSelected" :loading="loading" @click="start">
                    批量删除
                </a-button>
                <span style="margin-left: 8px">
                    <template v-if="hasSelected">
                        {{ `选中 ${selectedRowKeys.length} 条数据` }}
                    </template>
                </span>
                <a-input-search allowClear style="display:inline-block;width: 300px;margin-left: 20px;" placeholder="输入设备ID"
                    enter-button @search="onSearch" />
                <a-button :loading="loading" style="margin-left: 30px;" icon="import" type="primary" @click="exportData">
                    导出数据
                </a-button>
                <a id="exportLink" style="display:none;" href="http://localhost:8089/demo/equipment/export" download="true"></a>
            </div>
            <a-table :columns="columns" :data-source="data"
                :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :pagination="false"
                align="center">
                <a slot="equipmentId" slot-scope="text">{{ text }}</a>
                <span slot="action" slot-scope="text, record">
                    <a style="color:red;" @click="handelDelete(record)"><a-icon type="delete" /> 删除</a>
                </span>

            </a-table>
            <a-pagination style="margin-top: 25px;margin-left: 40%;" v-model="params.current"
                :page-size-options="pageSizeOptions" :total="params.total" show-size-changer :page-size="params.size"
                @showSizeChange="onShowSizeChange">
                <template slot="buildOptionText" slot-scope="props">
                    <span v-if="props.value !== params.total">{{ props.value }}条/页</span>
                    <span v-if="props.value === params.total">全部</span>
                </template>
            </a-pagination>
        </div>

    </div>
</template>

<script>
import 'ant-design-vue/dist/antd'
const columns = [
    {
        title: '设备ID',
        dataIndex: 'equipmentId',
        key: 'equipmentId',
        align: 'center',
        scopedSlots: { customRender: 'equipmentId' },
    },
    {
        title: '天线号',
        dataIndex: 'antennaNo',
        key: 'antennaNo',
        align: 'center'
    },
    {
        title: '设备号',
        dataIndex: 'deviceNo',
        key: 'deviceNo',
        align: 'center'
    },
    {
        title: '信号强度',
        dataIndex: 'rssi',
        key: 'rssi',
        align: 'center'
    },
    {
        title: 'IP或串口号',
        dataIndex: 'communicationMode',
        key: 'communicationMode',
        align: 'center'
    },
    {
        title: '私有数据',
        dataIndex: 'privateData',
        key: 'privateData',
        align: 'center'
    },
    {
        title: '温度值',
        dataIndex: 'temperature',
        key: 'temperature',
        align: 'center'
    },
    {
        title: '标签类型',
        dataIndex: 'tagType',
        key: 'tagType',
        align: 'center'
    },
    {
        title: '报警值',
        dataIndex: 'alarm',
        key: 'alarm',
        align: 'center'
    },
    //   {
    //     title: '用户数据',
    //     dataIndex:'userData',
    //     key:'userData'
    //   },
    {
        title: '时间戳',
        dataIndex: 'time',
        key: 'time',
        align: 'center'
    },
    {
        title: '操作',
        key: 'action',
        scopedSlots: { customRender: 'action' },
        align: 'center'
    },
];


const params = {
    current: 1,
    size: 10,
    total: 10,
    equipmentId: ''
}
import ReconnectingWebSocket from 'reconnecting-websocket';
import { listByPage, deleteData, delAllData} from '../../api/demo'
export default {
    name: 'basetable',
    data() {
        return {
            data:[],
            columns,
            selectedRowKeys: [],
            params,
            pageSizeOptions: ['10', '20', '30', '40', '50'],
            loading: false,
            url:"ws://localhost:8089/ws/100",
            socket:''
        }
    },
    computed: {
        hasSelected() {
            return this.selectedRowKeys.length > 0;
        },
    },
    created() {
        this.getData();
        this.websocketInit();
    },
    methods: {
        //分页过滤查询
        getData() {
            listByPage(this.params).then(res => {
                this.data = res.data.records;
                this.params.current = res.data.current;
                this.params.size = res.data.size;
                this.params.total = res.data.total;
            })
        },
        //改变当前页码和页大小
        onShowSizeChange(current, pageSize) {
            this.params.size = pageSize;
            this.params.current = current;
            this.getData();
        },
        //删除
        handelDelete(record) {
            const that = this;
            // 二次确认删除
            this.$confirm({
                type: 'warning',
                title: '提示',
                content: '确定要删除吗？',
                okText: '确认',
                cancelText: '取消',
                onOk() {

                    deleteData(record).then(res => {
                        that.$message.success("删除成功");
                        that.getData();
                    })
                }
            })
        },
        //多选操作
        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys;
        },
        //批量删除
        start() {
            this.loading = true;
            setTimeout(() => {
                delAllData(this.selectedRowKeys).then(res => {
                    this.$message.success("删除成功");
                    this.getData();
                    this.loading = false;
                    this.selectedRowKeys = [];
                })
            }, 1000);
        },
        //搜索
        onSearch(value) {
            this.params.equipmentId = value;
            this.getData();
        },
        //websocket初始化
        websocketInit(){
            var that=this;
            // 建立websocket 连接
            this.socket = new ReconnectingWebSocket(this.url);
            this.socket.addEventListener("open", () => {
                if (!this.socket) return;
                if (this.socket.readyState === 1) {
                    console.log("建立成功，发送消息");
                }
            });

            //收信
            this.socket.addEventListener("message", (e) => {
                 //消息进入后的处理逻辑
                 that.data.unshift(JSON.parse(e.data));
            });

            // 错误时进行的处理
            this.socket.addEventListener("error", (e) => {
                console.error(e.message);
            });

            // 关闭时进行的操作
            this.socket.addEventListener("close", () => {
                this.socket.close();
                console.log("websocket已关闭");
            });
        },
        //导出数据
        exportData(){
            const that = this;
            // 二次确认
            this.$confirm({
                type: 'warning',
                title: '提示',
                content: '确定要导出去重数据吗？(导出数据格式为Excel)',
                okText: '确认',
                cancelText: '取消',
                onOk() {
                    that.loading=true;
                    setTimeout(() => {
                        var elem= document.getElementById("exportLink");
                        elem.click();
                        that.$message.success("导出成功");
                        that.loading=false;
                    }, 1000);
                }
            })
        }
    },
        
}

</script>

<style scoped>
.header {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 70px;
    font-size: 22px;
    color: #fff;
}

.collapse-btn {
    float: left;
    padding: 0 21px;
    cursor: pointer;
    line-height: 70px;
}

.header .logo {
    float: left;
    width: 200px;
    padding-left: 35px;
    line-height: 70px;
}

.header-right {
    float: right;
    padding-right: 50px;
}

.header-user-con {
    display: flex;
    height: 70px;
    align-items: center;
}

.btn-fullscreen {
    transform: rotate(45deg);
    margin-right: 5px;
    font-size: 24px;
}

.btn-bell,
.btn-fullscreen {
    position: relative;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 15px;
    cursor: pointer;
}

.btn-bell-badge {
    position: absolute;
    right: 0;
    top: -2px;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: #f56c6c;
    color: #fff;
}

.btn-bell .el-icon-bell {
    color: #fff;
}

.user-name {
    margin-left: 10px;
}

.user-avator {
    margin-left: 20px;
}

.user-avator img {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.el-dropdown-link {
    color: #fff;
    cursor: pointer;
}

.el-dropdown-menu__item {
    text-align: center;
}

.content-title {
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
}

.pre-img {
    width: 80px;
    height: 80px;
    background: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 40px;
}

.crop-demo {
    display: flex;
    align-items: flex-end;
}

.crop-demo-btn {
    position: relative;
    width: 80px;
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    margin-left: 20px;
    margin-bottom: 25px;
    background-color: #409eff;
    color: #fff;
    font-size: 12px;
    border-radius: 4px;
    box-sizing: border-box;
}

.crop-input {
    position: absolute;
    width: 100px;
    height: 40px;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}

.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 220px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
